<template>
  <div id="logLinkMain" ref="chartLogLink" style="width:99%; height:300px;margin-top:10px;"></div>
</template>

<script>
import { getTrend } from '@/api/home'
import { Loading } from 'element-ui'
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  data () {
    return {
      chart: null,
      trendLineData: [],
      timeList: [],
      titleData: [],
      loadingInstance: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart().then(res => {
        this.listData()
      })
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    listData (val) {
      if (document.getElementById('LogLine')) {
        this.loadingInstance = Loading.service({
          target: '#LogLine',
          lock: true,
          text: this.$t('加载'),
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
      }
      getTrend().then(res => {
        if (res.status === 0) {
          this.timeList = res.info.TIME
          this.trendLineData = []
          this.titleData = []
          for (let item in res.info) {
            if (item !== 'TIME') {
              this.titleData.push(item)
              this.trendLineData.push({
                name: item,
                type: 'line',
                showSymbol: false,
                data: res.info[item]
              })
            }
          }
          this.chart.setOption(this.option(this.trendLineData, this.timeList, this.titleData), true)
        }
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
          this.$emit('loadingClick')
        }
      }).catch(e => {
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
          this.$emit('loadingClick')
        }
      })
    },
    option (val, time, title) {
      var data = {
        color: ['#ee6666', '#fac858', '#5ab1ef', '#009966', '#d87a80',
          '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
          '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
          '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'],
        title: {
          // text: '日志趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'scroll',
          padding: [0, 40],
          data: title
          // data: ['PLC设备1', 'PLC设备2', 'PLC设备3', 'PLC设备4', 'PLC设备5']
        },
        grid: {
          left: '4%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          right: 30,
          feature: {
            saveAsImage: {
              title: this.$t('保存为图片')
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          name: this.$t('时间'),
          data: time
        },
        yAxis: {
          type: 'value'
          // name: 'kwh'
        },
        series: val
      }
      return data
    },
    initChart (data) {
      this.chart = this.$echarts.init(document.getElementById('logLinkMain'))
      this.chart.setOption(this.option(this.trendLineData, this.timeList, this.titleData), true)
      return Promise.resolve('seccess')
    },
    exportImage () {
      let dataURL = ''
      var img = new Image()
      img.src = this.chart.getDataURL({
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff'
      })
      return new Promise(function (resolve, reject) {
        img.onload = function () {
          var canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          var ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
          dataURL = canvas.toDataURL('image/png')
          resolve(dataURL)
        }
      })
    }
  }
}
</script>
